<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/reset.css" />
  <link rel="stylesheet" href="./libs/layui/css/layui.css">
  <script src="./libs/jquery.min.js"></script>
  <script src="./libs/layui/layui.js"></script>
  <title>考试列表</title>
  <style>
    html,body{
      height: 100%;
    }
    body{
      display: flex;
      flex-direction: column;
    }
    .list-title {
      background: #FFFFFF;
      text-align: center;
      padding: 3.7333vw 0;
      font-weight: 500;
      font-size: 4.2667vw;
      color: #333333;
    }

    .list-main {
      flex: 1;
      background: #f4f5f7;
      overflow: auto;
      padding: 4vw 0;
      margin-bottom: 18.1333vw;
      box-sizing: border-box;
    }

    .list-main .main-header {
      position: fixed;
      top: 0;
      width: 100%;
      padding: 3.7333vw;
      text-align: center;
      height: 4.8vw;
      line-height: 4.8vw;
      background: #ffffff;
      font-size: 4.2667vw;
      font-weight: 500;
      color: #333333;
    }

    .list-main .main-header img {
      position: absolute;
      left: 4vw;
      width: 2.6667vw;
      height: 4.8vw;
    }

    .listItem {
      margin: 0 auto;
      margin-bottom: 4vw;
      padding-bottom: 4vw;
      width: 92vw;
      background: #ffffff;
      border-radius: 2.1333vw;
      font-size: 3.7333vw;
      font-weight: 400;
    }

    .listItem:last-child {
      margin-bottom: 0;
    }

    .contentTop {
      padding-left: 3.2vw;
      margin-bottom: 4vw;
      /* line-height: 12.8vw; */
      padding: 4.5333vw 3.2vw;
      background: #EFF7F3;
      border: .2667vw solid #ffffff;
      border-radius: 2.1333vw 2.1333vw 0 0;
      font-weight: 500;
      color: #333333;
    }


    .subTitle {
      margin-left: 3.2vw;
      line-height: 6.4vw;
      color: #666666;
    }

    .subTitle+span {
      color: #333333;
    }

    .enterBtn {
      margin: 0 auto;
      margin-top: 4vw;
      display: block;
      width: 25.3333vw;
      height: 8.5333vw;
      line-height: 8.5333vw;
      background: #41ba79;
      border-radius: 1.0667vw;
    }

    .contentBottom {
      box-sizing: border-box;
      margin: 0 auto;
      padding: 1.6vw 3.2vw;
      margin-top: 4vw;
      width: 85.6vw;
      background: #fff7f7;
      border: .1333vw solid #ffa2a2;
      border-radius: 1.3333vw;
      font-size: 0;
      color: #e22d2c;
      line-height: 7.2vw;
    }

    .contentBottom p {
      display: inline-block;
      width: calc(100% - 5.6vw);
      font-size: 3.7333vw;
    }

    .contentBottom img {
      display: inline-block;
      vertical-align: top;
      margin-right: 1.8667vw;
      margin-top: 1.6vw;
      width: 3.7333vw;
      height: 3.7333vw;
    }

    .bottom {
      height: 18.1333vw;
      background: #ffffff;
      display: flex;
      align-items: center;
      position: fixed;
      bottom: 0;
      width: 100%;
    }

    .cancelBtn {
      margin: 0 auto;
      display: block;
      border: none;
      width: 78.6667vw;
      height: 10.1333vw;
      line-height: 10.1333vw;
      background: #41ba79;
      border-radius: 1.6vw;
      font-size: 4vw;
      text-align: center;
      color: #ffffff;
    }
  </style>
</head>

<body>
  <p class="list-title">职领未来教育系统</p>
  <div id="listView" class="list-main"></div>
  <div class="bottom">
    <button type="button" class="layui-btn cancelBtn">退出</button>
  </div>
</body>
<script id="listTpl" type="text/html">
  {{# layui.each(d.list, function(index, item){ }}
   <div class="listItem">
     <div class="contentTop">{{item.name}}</div>
     <p><span class="subTitle">开始时间：</span> <span>{{item.start}}</span> </p>
       <p> <span class="subTitle">截止时间：</span> <span>{{item.end}}</span> </p>
       <p> <span class="subTitle">考试时长：</span> <span>{{item.duration}}</span></p>

     {{#  if(item.title){ }}
     <div class="contentBottom">
       <img src="./imgs/warning.png" style="display: inline-block;" >
       <p> {{item.title}}</p>
     </div>
     {{#  } }} 
     <button type="button" class="layui-btn enterBtn" data-examid="{{item.examid}}">进入考试</button>
   </div>
   {{# }); }}
</script>
<script>
  layui.use(['laytpl'], function () {
    var laytpl = layui.laytpl,
      getTpl = listTpl.innerHTML,
      view = document.getElementById('listView');
    // 请求获取考试列表
    var data = { //数据
      list: [
        {
          examid: 'qqq111',
          name: '信息系统运维管理-2024年9月第一批考试',
          start: '2024-08-28  09:00',
          end: '2024-08-29  11:00',
          duration: '120分钟',
          title: '请参加信息系统运维管理大课堂的同学选择此考试，如已获取证书，请勿重复参加考试',
        },
        {
          examid: 'qqq222',
          name: '信息系统运维管理-2024年9月第一批考试2',
          start: '2024-08-28  09:00',
          end: '2024-08-29  11:00',
          duration: '120分钟',
          // title: '请参加信息系统运维管理大课堂的同学选择此考试，如已获取证书，请勿重复参加考试',
        },
        {
          examid: 'qqq333',
          name: '信息系统运维管理-2024年9月第一批考试3',
          start: '2024-08-28  09:00',
          end: '2024-08-29  11:00',
          duration: '120分钟',
          // title: '请参加信息系统运维管理大课堂的同学选择此考试，如已获取证书，请勿重复参加考试',
        }
      ]
    }
    // 判断是否跳转至登录页
    if (data.list.length > 1) {
      laytpl(getTpl).render(data, function (html) {
        view.innerHTML = html;
      });
    } else {
      window.location.href = './login.html'
    }

    // 点击进入
    $('.enterBtn').click(function () {
      console.log($(this).data('examid'));
      // window.location.href = './login.html'
    })
  });
</script>

</html>